<template>
    <div class="container">
      <div class="header">
        <div class="title">用户列表</div>
      </div>
      <el-table stripe v-loading="loading" :data="tableData">
        <el-table-column prop="id" label="ID" width="100"></el-table-column>
        <el-table-column prop="mobile" label="手机号"></el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="create_time" label="绑定时间"></el-table-column>
        <el-table-column fixed="right" width="220" label="操作">
          <template slot-scope="scope">
            <el-button
              @click.prevent="handleDelete(scope.row)"
              type="danger"
              plain
              size="mini"
              v-permission="{ permission: '删除用户', type: 'disabled' }"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :background="true"
          :page-size="pageCount"
          :current-page="currentPage"
          v-if="refreshPagination"
          layout="prev, pager, next, jumper"
          :total="totalNums"
        ></el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import UserModel from '@/model/user'
  
  export default {
    data() {
      return {
        refreshPagination: true,
        tableData: [],
        totalNums: 0,
        currentPage: 1,
        pageCount: 10,
      }
    },
    async created() {
      this.loading = true
      this.getLists()
      this.loading = false
    },
    methods: {
      async getLists() {
        const page = this.currentPage - 1
        const count = this.pageCount
        const users = await UserModel.getList(page, count)
        this.tableData = users.items
        this.totalNums = users.total
      },
      // 切换table页
      async handleCurrentChange(val) {
        this.currentPage = val
        this.loading = true
        this.getLists()
        this.loading = false
      },
      handleDelete(val) {
        let res
        this.$confirm('此操作将永久删除该用户，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          try {
            this.loading = true
            res = await UserModel.delete(val.id)
          } catch (e) {
            this.loading = false
            console.error(e)
          }
          if (res.code < window.MAX_SUCCESS_CODE) {
            this.loading = false
            if (this.totalNums % this.pageCount === 1 && this.currentPage !== 1) {
              this.currentPage--
            }
            this.getLists()
            this.$message({
              type: 'success',
              message: `${res.message}`,
            })
          } else {
            this.loading = false
            this.$message.error(`${res.message}`)
          }
        })
      },
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .container {
    padding: 0 30px;
  
    .header {
      display: flex;
      align-items: center;
  
      .title {
        height: 59px;
        line-height: 59px;
        color: $parent-title-color;
        font-size: 16px;
        font-weight: 500;
      }
    }
  
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin: 20px;
    }
  }
  </style>
  